身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識
こんにちは、ご無沙汰しています。
Web担当の野中です。
前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。
というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。
ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。
より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。
本題
さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。
初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。
画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。
未だにWebサイト高速化の具体的な手法について解説に至っていませんが、文量の関係でさらに次回に回しています。
画像最適化ポイントと全体像
今回は画像に関する基礎知識の解説ですが、画像最適化の全体像とポイントは以下の通りです。
括弧内は解説する回数を表します。
- ファイルサイズを抑える
- 画像形式それぞれの特性を知り適切な画像形式を選択する（第1回）
- ムダなメタデータの削除（第3回）
- 人の目にはわからない程度に画質を調整しファイルサイズを削減する（第3回）
- リクエスト数の削減
- インラインイメージ（第2回）
- CSS Sprite（第2回）
- Webフォントアイコンの利用（第2回）
- イメージマップ（第2回）
- 画像を使わずCSS3で対応（第2回）
- レンダリングの負荷を減らす
- 画像のサイズ（width,height）を指定（第3回）
今回は「画像最適化ファイルサイズを抑えるためのポイント」の１つ目「それぞれの画像形式の特性を知り適切な形式を選択する」について解説します。これは、Webデザイナーが画像を生成する段階でファイルサイズを抑えるための知識を習得することを目的としています。
対象
今回から具体的に対象者を明記しておきます。
特にWebデザイナーを主対象としています。
- Webデザイナー
- フロントエンドエンジニア
- Webディレクター
- Web担当者
それでは、画像に関する基礎知識について紹介していきたいと思います。
ここで解説するまでもないくらいに皆さん知っていると思いますが、まずは、GIF・JPEG・PNG形式のお復習いです。
特に画像形式の特徴はWebデザイナーが画像の切り出しを行う際、画質を維持しつつファイルサイズを落とすために必要な知識です。
この記事はビギナーも含めた広い層に向けて解説しているので当たり前と思われる説明も多く含まれます。予めご了承ください。
1，GIF（Graphics Interchange Format）
まずはGIFについて紹介します。
GIFは色数が256色に限定されており、写真のような色数の多い画像には向きません。
GIFの大きな利点は透明色が指定できることです。これはCSSの背景色と合わせて利用することでJPEGではできない表現ができます。
ただ、最近はPNGを利用することが多いかもしれません。
その他の特徴として、PNGが普及した現在でもアニメーションが利用できるのはGIFだけであり今でも広く利用されています。
| 圧縮形式 | 可逆圧縮 *1（ラスタ形式） |
|---|---|
| 最大色数 | 8bit（256色） |
| インデックスカラー *2 | 対応 |
| 透過処理 | 対応（透明色のみ） |
| 段階的表示 | 対応（インターレースを利用するとファイルサイズが微増します） |
| アニメーション | 対応 |
| 補足 | 水平方向に同じ色が連続する画像の方が圧縮率が高くなる。 つまり、横方向のストライプは圧縮率が高く、縦方向のストライプは圧縮率が低くなる。 |
1.1，GIF形式が向いている画像
- べた塗りの多い画像（PNG-8と比較検討）
- IE6を対象とし透明色を利用したい場合
- 簡易的なアニメーションを利用したい場合
2，JPEG(Joint Photographic Experts Group)
JPEGは写真などによく利用される形式です。
非可逆圧縮形式のためもとの画質に戻すことはできません。
その代わりに圧縮効率が高くファイルサイズを抑えることができます。
| 圧縮形式 | 非可逆圧縮 *3形式（ラスタ形式） |
|---|---|
| 最大色数（色深度 *4） | 24bit(16,777,216色) |
| 透過処理 | 非対応 |
| インデックスカラー | 非対応 |
| 段階的表示 | 対応（プログレッシブを利用するとファイルサイズが微増します） |
| アニメーション | 非対応 |
| 補足 | 画像は8×8画素のブロックに分割され、そのブロック単位で圧縮が行われる。 このブロックを意識することで圧縮時のノイズを軽減し画質を維持したまま高い圧縮が行える（理論的にはね）。 |
2.1，JPEG形式が向いている画像
- 写真などのフルカラーまたはモノクロ写真
3，PNG-8/24/32
最近IE6の対応も減り、一般的になりつつあるPNGについてです。
PNGはJPEGなどの非可逆圧縮と違い、圧縮による劣化のない可逆圧縮形式です。
PNGには、PNG-8、PNG-24、PNG-32と3つの種類があります。
それぞれの違いは以下の表の通りです。
| 形式 | 色数 | 透明色（transparent） | アルファチャネル（alphachannel） |
|---|---|---|---|
| PNG 8 | 8bit（256色） | 対応 | 対応 |
| PNG 24 | 24bit(16,777,216色) | 対応 | 対応 |
| PNG 32 | 24bit(16,777,216色) | 対応 | 対応 |
PNG-8はGIFと似ていますが、GIFよりも圧縮率が高いので、GIFと比べファイルサイズが小さい傾向にあります（すべてではありません）。
また、PNG-32とありますが、32bitカラーというわけではなく、24bitカラーにアルファーチャネルが利用できる形式です。
PNG-32はJPEGと同じ色数でありながらアルファチャネルが指定できる唯一の形式です。
| 圧縮形式形式 | 可逆圧縮ビットマップ形式（ラスタ形式） |
|---|---|
| 最大色数 | グレースケール、8bit（256色）または24bit(16,777,216色)か24bit＋アルファー（透過） 使わないと思うけど48bit（280 兆色）もある |
| インデックスカラー | 対応 |
| 透過処理 | 対応（PNG-8、PNG-24は透明色のみ、PNG-32は透明色・アルファチャネル） |
| 段階的表示 | 対応（インターレースを利用するとファイルサイズが微増します） |
| アニメーション | 非対応（APNGという形式はある） |
| 補足 | 非可逆圧縮できるツールもある？ Photoshopではできないかもしれないけど画像に適したフィルタ形式を指定することでDeflationの圧縮率を上げられるそうです。 具体的に言うとGIFは横方向のストライプのみに対して圧縮率が高くなりますが、PNGはフィルタ形式の選択により縦方向のストライプの圧縮率を上げることもできます。 |
PNG-24の透明色指定とPNGのフィルタについてご指摘いただき修正しました。
3.1，PNG形式が向いている画像
- べた塗りの多い色数の限られた画像（GIFと比較検討し利用）
- 透明度を指定したい画像
- CSS Sprite用画像
3.2，Photoshop上の表記に注意
すでに当たり前のお話ですが、PhotoshopではWeb及びデバイス用に保存のダイアログでPNG-32のことをPNG-24と表記しています。
4，SVG(Scalable Vector Graphics)
SVGはIE6対応の必要性が低下している現在、利用できる機会が広がりつつある唯一一般的に利用できるベクター形式です。
SVGはXMLで記述されたベクターデータで拡大・縮小しても劣化がなく、レイヤー機能を持ちます。
基本的にビットマップ（ラスター形式）よりファイルサイズが小さい傾向にありますが、複雑なベクターグラフィックスの場合その限りではありません。
XMLで記述されているためエディタで編集することができJavaScriptからの操作も可能です。HTMLに直接埋め込むこともできます。
身近なツールでSVGを作成するにはIllustratorが便利です。
4.1，SVGのソースとサンプル
実際にIllustratorで作成し保存したSVGファイルの中身はこうなっています。
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640px" height="400px" viewBox="0 0 640 400" enable-background="new 0 0 640 400" xml:space="preserve"> <polygon points="333.913,110.797 358.199,160.007 412.506,167.898 373.209,206.203 382.486,260.289 333.913,234.753 285.34,260.289 294.617,206.203 255.32,167.898 309.626,160.007 "/> </svg>
4.2，SVGの表示サンプル
上記のSVGを実際に記事に読み込んでいます。
拡大表示したときの画像との差
実際に拡大表示してみると、右にあるアイコン画像と比較して拡大したときの差がよくわかると思います。
4.3，SVGが向いている場合
- JavaScriptで動的に変化するグラフ
- 拡大・縮小しても美しいタイポグラフィやアイコンの実現
5，WebP
最後に、今のところ実用はできませんが一応知っておきたいGoogleが開発している画像フォーマット「WebP」についてです。
WebPはJPEGやPNGに比べ圧縮率が高いとのこと。
残念ながら、今のところGoogle ChromeとAndroidでしか利用できないのでWebサイトでは使い物になりません。
Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。
| 形式 | 可逆圧縮ビットマップ形式 or 非可逆圧縮ビットマップ形式 |
|---|---|
| 色数 | - |
| アルファ | 対応 |
| 段階的表示 | - |
| アニメーション | - |
| 補足 | JPEGと違い非可逆圧縮でもアルファチャネルを使えるのが特徴。 |
PhotoshopでWebP形式の画像を書き出すことができるプラグインがあるようですが、私の環境ではうまく動かすことができませんでした。
インストール型のコンバーターもあるようです。
6，画像別の対応ブラウザ
上記で紹介した画像形式について主要なブラウザの対応表を作ってみました。
バージョン名の表記がないものは特に問題となることもないので最新のバージョンを指します。
| 形式 | Chrome | Firefox | Safari | Mobile Safari | Android | IE10 | IE9 | IE8 | IE7 | IE6 | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| バージョン | iOS6 | iOS5 | iOS4 | 4.0 | 3.0 | 2.0 | ||||||||
| GIF | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| JPEG | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| PNG 8 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| PNG 24 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| PNG 32 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × |
| SVG | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ | × | ○ | ○ | × | × | × |
| WebP | ○ | × | × | × | × | × | ○ | × | × | × | × | × | × | × |
ご指摘頂きIE6のPNG-24対応を修正しました。
7，その他の画像形式
上記で紹介したもの以外にも様々な画像形式があります。
それらについても雑学として読むと意外と面白いです。
- TIFF（Tagged Image File Format）
Wikipedia: Tagged Image File Format - Windows bitmap（Microsoft Windows Bitmap Image）
Wikipedia: Windows bitmap - RAW（Raw image format）
Wikipedia: RAW画像 - PostScript
Wikipedia: PostScript - PICT（QuickDraw Picture）
Wikipedia: QuickDraw Picture
まとめ
今さらな情報も多々ありますが、改めて調べてみると「へぇー」という情報もあるのではないでしょうか。
自分でまとめていても勉強になることが多々ありました。
それぞれの画像形式の特性を理解し、画像の品質を保ちながらファイルサイズを抑えましょう。
紹介仕切れなかったインターレースのファイルサイズ、ビット深度や24bitの意味、スキャンライン、フィルターについても個人的に勉強していますが、まだ解説できるほどの理解ができていないので、別の機会に紹介できるよう引き続き学習したいと思います。
この記事で認識間違いをしている部分があればご指摘いただけると幸いです。
![[レポート] データ分析作業におけるSnowflakeパフォーマンスの向上 #SnowflakeSummit](https://devio2023-media.developers.io/wp-content/uploads/2021/03/snowflake-logo-1200x630-1.png){kind=logo}
